<template>
  <u-popup :show="show" @close="onCancel">
    <view class="popTit">
      <text>城市选择</text>
      <text @click="onCancel" class="close iconfont icon-navbar_close"></text>
    </view>

    <view class="region-box">
      <view class="subTit">
        <text>省份</text>
        <text>城市</text>
        <text>区县</text>
      </view>
      <picker-view :value="region" @change="bindChange" :indicator-style="{'height': '80rpx'}">
        <picker-view-column>
          <view class="center" v-for="(item, index) in regionList" :key="index">
            {{ item.label }}
          </view>
        </picker-view-column>
        <picker-view-column v-if="regionList[region[0]]">
          <view class="center" v-for="(item, index) in regionList[region[0]].children" :key="index">
            {{ item.label }}
          </view>
        </picker-view-column>
        <picker-view-column v-if="regionList[region[0]]">
          <view class="center" v-for="(item, index) in regionList[region[0]].children[region[1]].children" :key="index">
            {{ item.label }}
          </view>
        </picker-view-column>
      </picker-view>

      <view style="width: 100%;" class="btn-Block center">
        <view class="btn center" @click="onSubmit">
          确定
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import AddressData from './AddressData.js'		//引入的省市区静态数据文件
export default {
  name: "AddressPicker",
  created () {
    this.regionList = AddressData
    console.log(this.regionList)
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      region: [0, 0, 0],	//地址每列的index
      regionList: [],		//地址数据，格式为 三级地址全返回
      addressList: []
    };
  },
  methods: {
    //选择值改变事件
    bindChange (e) {
      const val = e.detail.value
      if (this.region[0] !== val[0]) {
        // 如果滑动的是第一列数据，让二三列恢复到0
        this.region = [val[0], 0, 0]
      } else if (this.region[1] !== val[1]) {
        // 滑动的是第二列数据
        this.region = [val[0], val[1], 0]
      } else {
        this.region = e.detail.value;
      }
    },
    //确定按钮操作
    onSubmit () {
      this.addressList[0] = {
        id: this.regionList[this.region[0]].value,
        name: this.regionList[this.region[0]].label
      }
      this.addressList[1] = {
        id: this.regionList[this.region[0]]
          .children[this.region[1]].value,
        name: this.regionList[this.region[0]]
          .children[this.region[1]].label
      }
      this.addressList[2] = {
        id: this.regionList[this.region[0]].children[this.region[1]]
          .children[this.region[2]].value,
        name: this.regionList[this.region[0]].children[this.region[1]]
          .children[this.region[2]].label
      }
      this.$emit('submit', this.addressList)
    },
    onCancel () {
      // 调用父组件方法关闭
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  border-radius: 20rpx 20rpx 0 0;
}
.popTit {
  position: relative;
  margin-top: 48rpx;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 36rpx;
  .close {
    position: absolute;
    top: 50%;
    right: 36rpx;
    transform: translateY(-50%);
  }
}
.region-box {
  margin: 0 36rpx;
  background-color: #ffffff;
  .subTit {
    margin-top: 64rpx;
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 28rpx;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .btn-Block {
    width: 100%;
    background-color: #ffffff;
    padding: 25upx;
    height: 230upx;
    .btn {
      width: 686rpx;
      height: 80rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      background: #FF5900;
      border-radius: 40rpx;
    }
  }

  .picker-view {
    background-color: #fffefd;
  }

  picker-view {
    width: 100%;
    height: 600upx;
  }
}
</style>
